<template>
<div>
  <el-card>
    <div class="coll_title">路由管理</div>
    <el-button type="primary" @click="addRouteShow">添加路由</el-button>
  </el-card>
  <el-card class="mag_t-20">
    <el-table :data="list" :border="true" style="width: 99%">
      <el-table-column type="selection" width="40" />
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="class_name" label="分类" />
      <el-table-column prop="path" label="地址" />
      <el-table-column prop="name" label="页面" />
      <el-table-column prop="icon" label="icon" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.is_show==1?'success':'danger'">
            <span v-if="scope.row.is_show==1">启用</span>
            <span v-if="scope.row.is_show==0">禁用</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120">
        <template #default="scope">
          <el-button type="primary" @click="addData(scope.row,'预览')">查看</el-button>
          <el-button type="primary" @click="addData(scope.row,'编辑')">编辑</el-button>
          <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon-color="#626AEF"
              title="确定删除路由吗?"
              @confirm="deleteData(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="mag_t-20">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :page-sizes="[10, 20, 30, 40, 100]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  </el-card>

  <el-dialog v-model="visible" :show-close="false" width="1100px">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div class="wh_f">
          <div class="flex_1"><h4 :id="titleId" :class="titleClass">
              {{ title }}</h4></div>
          <div><el-button type="danger" @click="close">X</el-button></div>
        </div>
      </div>
    </template>
    <div>
      <div class="wh_f">
        <div class="flex_3">
          <titleText title="模块"></titleText>
          <div>
            <el-form :model="form" label-width="auto">
              <el-form-item label="分类 :">
                <el-select
                    :disabled="isLook"
                    v-model="form.route_id"
                    placeholder="全部"
                    style="width: 240px"
                >
                  <el-option
                      v-for="item in Classlist"
                      :key="item.id"
                      :label="item.name"
                      :value="String(item.id)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="地址 :">
                <el-input :disabled="isLook" v-model="form.path" />
              </el-form-item>
              <el-form-item label="页面名称 :">
                <el-input :disabled="isLook" v-model="form.name" />
              </el-form-item>
              <el-form-item label="icon :">
                <el-input :disabled="isLook" v-model="form.icon" />
              </el-form-item>
              <el-form-item label="状态 :">
                <el-switch :disabled="isLook"
                           v-model="form.is_show"
                           style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                           :active-value="1"
                           :inactive-value="0"
                />
              </el-form-item>
            </el-form>
            <div class="wz_rigdq">
              <el-button :disabled="isLook" @click="pushData" type="primary" size="large">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</div>
</template>
<script setup lang="ts">
// 引用状态存储
import { storeVuex } from "@/store/modules/user";
import {storeToRefs} from "pinia";
const vuex = storeToRefs(storeVuex())
import {onMounted, reactive, ref} from "vue";
import {route} from "@/api";
import {ElMessage} from "element-plus";
let list = ref()
let Classlist = ref()
let visible = ref(false)
let form:any = reactive({})
let rootlist:any = ref([])//路由列表

//分页初始值
let page = ref(1)
let limit = ref(10)
let count = ref()
let title = ref('')
let isLook = ref(false)
onMounted(()=>{
  getList()
  getuserRootList()
  getClassList()
})


// 获取用户权限路由列表
const getuserRootList = async ()=>{
  let res = await route.getRouteList({
    page:page.value,
    limit:limit.value,
  })
  list.value = res.data.data.data
  count.value = res.data.data.count;
}
// 获取路由列表
const getList = async ()=>{
  let res = await route.getRouteList({
    page:page.value,
    limit:limit.value,
  })
  list.value = res.data.data.data
  count.value = res.data.data.count;
}
// 获取路由分类列表
const getClassList = async ()=>{
  let res = await route.getRoute_ClassList({})
  Classlist.value = res.data.data.data
}
// 查看/编辑列表
const addData = (e:any,tit:any)=>{

  // form.value = JSON.parse(JSON.stringify(e))
  if(tit=='预览'){
    isLook.value = true
  }else{
    form.id=e.id,
    form.path= e.path,
    form.name=e.name,
    form.icon=e.icon,
    form.is_show=parseInt(e.is_show),
    form.route_id=e.route_id,
    isLook.value = false
  }
  visible.value = true
  title.value = tit
}
// 点击添加 打开弹窗
const addRouteShow = async(e:any)=>{
  visible.value=true
  title.value='添加'
  isLook.value = false
  Object.keys(form).forEach(key =>{
    // @ts-ignore
    form[key] = ''
  })
  // @ts-ignore
  form.is_show = 1
}
// 删除路由
const deleteData = async(e:any)=>{
  const res = await route.deleteRouteClass_List({id:e})
  getList()
  ElMessage({
    // @ts-ignore
    message: res.data.msg,
      type: res.data.status==1?'success':'error'
  })
}
// 添加 修改路由
const pushData = async ()=>{
  if(title.value == '添加'){
    const res = await route.addRoute_List(form)
    visible.value = false
    getList()
    ElMessage({
      // @ts-ignore
      message: res.data.msg,
      type: 'success',
    })
  }else{
    const res = await route.updateRoute_List({
      id:form.id,
      path:form.path,
      name:form.name,
      is_show:form.is_show,
      icon:form.icon,
      route_id:form.route_id,
    })
    visible.value = false
    if(res.data.status==1){
      ElMessage({
        // @ts-ignore
        message: res.data.msg,
      type: res.data.status==1?'success':'error'
      })
    }
    getList()

  }

}


// 分页
const handleSizeChange = async ()=>{
  getList();
}
const handleCurrentChange = async ()=>{
  getList();
}
</script>
<style scoped>

</style>
